<template>
  <section>
    <el-row style="margin-bottom: 20px">
      <el-button @click="createExamine" size="mini" type="primary">创建新体检</el-button>
    </el-row>
    <el-collapse>
      <el-collapse-item :name="examine.id" v-for="examine in examineList" :key="examine.id">
        <template slot="title">
          <el-row>
            <el-col :span="1" style="margin-left: 20px;">
              {{examine.id}} —
            </el-col>
            <el-col :span="1">
            </el-col>
            <el-col :span="6">
              {{examine.name}}
            </el-col>
            <el-col :span="10">
              <span v-if="examine.state === 0" style="color:red">未开始</span>
              <span v-if="examine.state === 1" style="color:#FFD700">进行中...</span>
              <span v-if="examine.state === 2" style="color:green">已完成</span>
            </el-col>
            <el-col :span="4">
              <el-button style="float: right; margin-right:0px" type="text" @click.stop="finishExamine(examine)" :disabled="examine.state === 2">完成体检</el-button>
            </el-col>
          </el-row>
        </template>
        <el-row v-if="examine.examineItems.length >0">
          <el-row v-for="examineItem in examine.examineItems" :key="examineItem.id">
            <el-col :span="2">
              {{examineItem.name}}
            </el-col>
            <el-col :span="2">
              ——
            </el-col>
            <el-col :span="2">
              <span v-if="examineItem.state === 0" style="color:red">未开始</span>
              <span v-if="examineItem.state === 1" style="color:#FFD700">进行中...</span>
              <span v-if="examineItem.state === 2" style="color:green">已完成</span>
            </el-col>
            <el-col :span="2">
              <el-button style="padding: 3px 0;float:right;" type="text" @click="finishExamineItem(examineItem)" :disabled="examineItem.state === 2">完成</el-button>
            </el-col>
          </el-row>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "examine",//只是用于完成体检的界面，查看体检进度，可以放到‘体检结果’
    data() {
      return {
        totalPage:0,
        examineList:[]
      }
    },
    created(e){
      //加载中医体检列表
      this.getExamineList()
    },
    watch:{
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      createExamine(){
        this.$router.push('/item/createExamine/')
      },
      goPage(val){
        this.getExamineList(val-1)
      },
      getExamineList(pageNo){
        this.fetch({name:"getExamineList",data:{page:pageNo? pageNo:0,departmentId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.examineList=res.content
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      finishExamine(i){
        console.log(i)
        this.fetch({name:"updateExamine",data:{id:i.id,state:2}})
          .then(res=>{
            console.log(res)
            i.state = res.state
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      finishExamineItem(i){
        console.log(i)
        //结束体检项,先签名才能finish
        this.fetch({name:"finishExamineItem",data:{id:i.id}})
          .then(res=>{
            console.log(res)
            i.state = res.state
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>

</style>
